<template>
  <div class="dashboard">
    <el-row :gutter="10">
      <el-col :span="12">
        <hy-card title="vw complaint tickets function group in last 7 days">
          <pie-echart :pieData="vwComplaintCategory"></pie-echart>
        </hy-card>
      </el-col>

      <el-col :span="12">
        <hy-card title="vw NCVQS in last 7 days">
          <rose-echart :roseData="vwNCVQSCategory"></rose-echart>
        </hy-card>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="12">
        <hy-card title="audi complaint tickets function group in last 7 days">
          <pie-echart :pieData="audiComplaintCategory"></pie-echart>
        </hy-card>
      </el-col>

      <el-col :span="12">
        <hy-card title="audi NCVQS in last 7 days">
          <rose-echart :roseData="audiNCVQSCategory"></rose-echart>
        </hy-card>
      </el-col>
    </el-row>


    <el-select v-model="lockStatus"
               @change="((value)=>{selectLock(value)})"
               placeholder="select sourceId"
    >
      <el-option label="complaint_12365auto" value="complaint_12365auto"/>
      <el-option label="complaint_315auto" value="complaint_315auto"/>
      <el-option label="complaint_315qc" value="complaint_315qc"/>
      <el-option label="complaint_aqsiqauto" value="complaint_aqsiqauto"/>
      <el-option label="complaint_autohome" value="complaint_autohome"/>
      <el-option label="complaint_qctsw" value="complaint_qctsw"/>
      <el-option label="complaint_qiche365" value="complaint_qiche365"/>
      <el-option label="complaint_qichemen" value="complaint_qichemen"/>
      <el-option label="complaint_tousu16888" value="complaint_tousu16888"/>
      <el-option label="forum_12365auto" value="forum_12365auto"/>
      <el-option label="forum_autohome" value="forum_autohome"/>
      <el-option label="forum_dongchedi" value="forum_dongchedi"/>
      <el-option label="forum_pcauto" value="forum_pcauto"/>
      <el-option label="forum_xcar" value="forum_xcar"/>
      <el-option label="forum_yiche" value="forum_yiche"/>
      <el-option label="VW" value="VW"/>
      <el-option label="Audi" value="Audi"/>
      <el-option label="forum_motortalk" value="forum_motortalk"/>
    </el-select>

    <el-row :gutter="20">
      <el-col :span="24">
        <hy-card title="different data source account">
          <line-echart v-bind="ticketsTrendBySourceId"></line-echart>
        </hy-card>
      </el-col>

    </el-row>
  </div>
</template>

<script lang="ts">
import {defineComponent, computed} from "vue";
import store, {useStore} from "@/store";

import localCache from '@/utils/cache'
import HyCard from "@/base-ui/card";
import {
  PieEchart,
  RoseEchart,
  LineEchart,
  BarEchart
} from "@/components/page-echarts";

export default defineComponent({
  name: "dashboard",
  components: {
    HyCard,
    PieEchart,
    RoseEchart,
    LineEchart
  },
  methods: {
    selectLock(sourceId: any) {
      localCache.setCache('sourceId-line-chart', sourceId)
      store.dispatch("dashboard/getDashboardDataActionBySourceId");
    }
  },
  setup() {
    const store = useStore();
    // 请求数据
    store.dispatch("dashboard/getDashboardDataAction");

    // 获取数据
    const vwComplaintCategory = computed(() => {
      return store.state.dashboard.vwComplaintDataInLast7Days.map((item: any) => {
        return {name: item.name, value: item.goodsCount};
      });
    });
    const vwNCVQSCategory = computed(() => {
      return store.state.dashboard.vwNCVQSDataInLast7Days.map((item: any) => {
        return {name: item.name, value: item.goodsCount};
      });
    });
    const audiComplaintCategory = computed(() => {
      return store.state.dashboard.audiComplaintDataInLast7Days.map((item: any) => {
        return {name: item.name, value: item.goodsCount};
      });
    });
    const audiNCVQSCategory = computed(() => {
      return store.state.dashboard.audiNCVQSDataInLast7Days.map((item: any) => {
        return {name: item.name, value: item.goodsCount};
      });
    });

    const ticketsTrendBySourceId = computed(() => {
      const xLabels: string[] = [];
      const values: any[] = [];
      const ticketsTrendBySourceId_result = store.state.dashboard.ticketsTrendDataBysourceId;

      for (const item of ticketsTrendBySourceId_result) {
        xLabels.push(item.name);
        values.push(item.goodsCount);
      }
      return {xLabels, values};
    });


    return {
      vwComplaintCategory,
      vwNCVQSCategory,
      audiComplaintCategory,
      audiNCVQSCategory,
      ticketsTrendBySourceId
    };
  }
});
</script>

<style scoped>
.content-row {
  margin-top: 20px;
}

.el-select {
  display: flex;
  margin-left: 0px;
  width: 20%;
  height: 20%;
}
</style>
